<template>
  <div id="browse">
    <div id="canvas"></div>
    <!-- 视频 -->
    <el-dialog :visible.sync="openVideo"
               width="70%"
               class="videoClass"
               @close="handleClose">
      <video style="width:100%;height:100%"
             :src="videoUrl"
             autoplay="autoplay"
             controls="controls"></video>
    </el-dialog>
    <!-- 音频 -->
    <el-dialog :visible.sync="openAudio"
               width="350px"
               @close="handleClose">
      <audio width="100%"
             height="100%"
             :src="Audio"
             autoplay="autoplay"
             controls="controls"></audio>
    </el-dialog>

    <!-- 图片 -->
    <el-dialog :visible.sync="openImage"
               @close="handleClose">

      <el-image :src="image"
                style="width:100%"></el-image>
    </el-dialog>
    <!-- 文字 -->
    <el-dialog :visible.sync="openText" width="80%"
               ref="textDialog"
               :close-on-click-modal="false"
               @close="handleClose">
      <div class="textWrap"
           v-html="text"></div>
    </el-dialog>
  </div>

</template>

<script>
import dagre from "dagre";
import graphlib from "graphlib";
export default {
  data () {
    return {
      graph: new joint.dia.Graph(),
      paper: new joint.dia.Paper(),
      openVideo: false,
      openAudio: false,
      openImage: false,
      openText: false,
      videoUrl: "",
      Audio: "",
      image: "",
      text: "",
      el: "",
    };
  },
  created () { },
  mounted () {
    this.el = $("#browse");
    let lookInitData = localStorage.getItem("lookData");
    this.init(lookInitData);
    $("#canvas").css({
      margin: "0 auto",
      left: 0,
      top: 0,
    });
  },
  methods: {
    init (data) {
      this.graph = new joint.dia.Graph();
      this.keyboard = new joint.ui.Keyboard();
      this.clipboard = new joint.ui.Clipboard();
      this.paper = new joint.dia.Paper({
        el: $("#canvas"),
        width: JSON.parse(data).width,
        height: JSON.parse(data).height,
        gridSize: 0,
        drawGrid: {
          name: "doubleMesh",
          args: [
            {
              color: "#dedede", //栅格点颜色
              scaleFactor: 1,
              thickness: 1, //栅格点大小
            },
            {
              color: "#dedede", //栅格点颜色
              scaleFactor: 10,
              thickness: 2, //栅格点大小
            },
          ],
        },
        background: {
          color: JSON.parse(data).color,
          image: JSON.parse(data).image,
          size: {
            width: JSON.parse(data).width,
            height: JSON.parse(data).height,
          },
        },
        model: this.graph,
        interactive: false,
        async: true,
        sorting: joint.dia.Paper.sorting.APPROX,
        linkPinning: false, // 连线必须连到某个元素，即不允许连到空白处
        snapLinks: {
          radius: 25, // 距离元素连接点25像素时自动连接上
        },
        defaultRouter: {
          name: "orthogonal",
        },
        perpendicularLinks: true,
        restrictTranslate: true, //设定元素不能拖出画布
      });
      this.paper.on({
        // 点击元素事件
        "cell:pointerdown": (cellView, evt, x, y) => {
          var cell = cellView.model;
          if (cell.get("attrs").root.incident == "视频") {
            this.openVideo = true;
            this.videoUrl = cell.get("attrs").root.incidentData;
          }
          if (cell.get("attrs").root.incident == "音频") {
            this.openAudio = true;
            this.Audio = cell.get("attrs").root.incidentData;
          }
          if (cell.get("attrs").root.incident == "图片") {
            this.openImage = true;
            this.image = cell.get("attrs").root.incidentData;
          }
          if (cell.get("attrs").root.incident == "文本") {
            this.text = cell.get("attrs").root.incidentData;
            // let dialogWidth = cell.get("attrs").root.dialogWidth;
            // let dialogHeight = cell.get("attrs").root.dialogHeight;
            let dialogColor = cell.get("attrs").root.dialogColor;

            this.$refs.textDialog.$el.firstChild.style.width = '80%';
            // this.$refs.textDialog.$el.firstChild.style.height =
            //   dialogHeight + "px";
            this.$refs.textDialog.$el.firstChild.style.background = dialogColor;
            this.openText = true;
          }
        },
      });
      let jsonstring = JSON.parse(localStorage.getItem("lookData"));
      console.log(localStorage.getItem("lookData"));
      this.graph.fromJSON(jsonstring.json);
      this.addPaperScroller();
      if (!this.IsPC()) {
      }
    },
    zoom (val) {
      this.paperScroller.zoom(100, { max: 2, grid: 0.1 });
      if (parseInt(val) != parseInt(1)) {
        this.paperScroller.zoom(val, { max: 2, grid: 0.1 });
      }
    },
    // 判断端
    IsPC () {
      var userAgentInfo = navigator.userAgent;
      var Agents = [
        "Android",
        "iPhone",
        "SymbianOS",
        "Windows Phone",
        "iPad",
        "iPod",
      ];
      var flag = true;
      for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flag = false;
          break;
        }
      }
      return flag;
    },
    // 对画布实现平移，滚动操作
    addPaperScroller () {
      this.paperScroller = new joint.ui.PaperScroller({
        paper: this.paper,
        autoResizePaper: true,
        scrollWhileDragging: true,
        padding: 0,
        cursor: "pointer",
      });
      this.el.append(this.paperScroller.render().el);
    },
    handleClose () {
      this.videoUrl = "";
      this.Audio = "";
      this.image = "";
      this.text = "";
    },
  },
};
</script>
<style scoped lang="scss">
#browse {
  width: 1100px;
  margin: 0 auto;
  .el-dialog__body {
    padding: 0;
  }
  .el-dialog__header {
    padding: 0 0 0 0;
    .el-dialog__headerbtn {
      z-index: 10;
    }
  }
  .el-dialog {
    overflow: auto;
    &::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }
    &::-webkit-scrollbar-track-piece {
      background-color: rgba(0, 0, 0, 0.2);
      -webkit-border-radius: 6px;
    }

    &::-webkit-scrollbar-thumb:vertical {
      height: 5px;
      background-color: rgba(255, 255, 255, 0.7);
      -webkit-border-radius: 6px;
    }

    &::-webkit-scrollbar-thumb:horizontal {
      width: 5px;
      background-color: rgba(125, 125, 125, 0.7);
      -webkit-border-radius: 6px;
    }
  }
  .textWrap {
    height: 485px;
    overflow: auto;
    padding: 20px;
    text-indent: 32px;
    img {
      max-width: 100%;
    }
  }
  .joint-paper-scroller {
    overflow: auto;
  }
}
</style>
